import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

// 引入elementUI
import { MessageBox, Form, FormItem, Input, Button, Checkbox } from 'element-ui';
// 按需注册
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button);
Vue.use(Checkbox);

// 注册全局组件：三级联动导航组件
import TypeNav from "@/components/TypeNav"
// 注册全局组件：轮播图
import Carousel from "@/components/Carousel"
// 注册全局组件：分页器
import Pagination from "@/components/Pagination"
// 引入全局组件
// 第一个参数：全局组件的名字，第二个参数：哪一个组件
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(Pagination.name, Pagination)

// 引入图片懒加载插件
import VueLazyload from 'vue-lazyload'
// 使用
Vue.use(VueLazyload)
// 使用（自定义）
// 1.保存一个图片
const loadimage = require('@/assets/1.jpg')
// 2.配置一下
Vue.use(VueLazyload, {
  //图片未加载出来时，显示该图片
  loading: loadimage,
})


// 引入路由器
import router from "@/router"

// 引入Vuex
import store from "@/store"

// 引入模拟数据mock
import "@/mock/mockServer"

// 统一接收api文件里的全部请求函数
// 统一引入
import * as API from "@/api"


new Vue({
  render: h => h(App),
  beforeCreate() {
    // 安装全局事件总线
    Vue.prototype.$bus = this
    // 将全部的api放到vue原型中
    Vue.prototype.$API = API
  },
  // 注册路由
  router,
  // 注册Vuex
  store
}).$mount('#app')
